<!--
 * @Author: ChaiHongJun
 * @Date: 2021-04-01 21:48:41
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-06-08 17:04:34
 * @version:
 * @Description: 歌手
-->
<template>
  <div class="singer-wrap container">
    <div class="filter">
      <ul class="tag-lang">
        <li
          v-for="(item, index) of area"
          :key="index"
          :class="{ active: item.value == areaActive }"
          @click="selectCategory('area', item.value)"
        >
          {{ item.label }}
        </li>
      </ul>
      <ul class="tag-lang tag-type">
        <li
          v-for="(item, index) of type"
          :key="index"
          :class="{ active: item.value == typeActive }"
          @click="selectCategory('type', item.value)"
        >
          {{ item.label }}
        </li>
      </ul>
      <ul class="tag-en">
        <li
          v-for="(item, index) of alphabet"
          :key="index"
          :class="{ active: item.value == alphabetActive }"
          @click="selectCategory('alphabet', item.value)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <loadingMore
      @loadMore="handleLoadMore"
      :artists="getArtistList"
      v-loading="loadingSingers"
    ></loadingMore>
    <loading v-if="loading"></loading>
  </div>
</template>
<script>
// import { getSingersCategory } from "@/request/api.js";
// import { getScrollTop, getClientTop, getScrollHeight } from "@/utils/index.js";
import Loading from "@/components/common/loading/Index";
import loadingMore from "@/components/singers/loadingMore/Index";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loadingSingers: false,
      areaActive: "全部",
      typeActive: "全部",
      alphabetActive: "热门",
      loading: false, //是否显示加载动画
      limit: 30, // 默认一次加载30个歌手
      area: [
        { value: -1, label: "全部" },
        { value: 7, label: "华语" },
        { value: 96, label: "欧美" },
        { value: 8, label: "日本" },
        { value: 16, label: "韩国" },
        { value: 0, label: "其他" },
      ],
      type: [
        { value: -1, label: "全部" },
        { value: 1, label: "男歌手" },
        { value: 2, label: "女歌手" },
        { value: 3, label: "乐队" },
      ],
      alphabet: [], // 首字母查询
      currentPage: 1, //当前页
      artists: [],
      chosenType: -1,
      chosenArea: -1,
      character: -1,
    };
  },
  components: {
    Loading,
    loadingMore,
  },
  computed: {
    ...mapGetters(["getArtistList"]),

    offset() {
      return (this.currentPage - 1) * this.limit;
    },
  },
  mounted() {
    //加载字母
    this.getEnLang();
    // 加载歌手
    // this.showSingersCategory();
    this.loadingSingers = true;
    this.$store.dispatch("getArtistList", {
      limit: this.limit,
      offset: this.offset,
      area: this.area[0].value,
      type: this.type[0].value,
      initial: -1,
    });
    this.loadingSingers = false;
  },
  methods: {
    selectCategory(cat, value) {
      if (cat == "area") {
        //区域选择
        this.chosenArea = value;
        this.areaActive = value;
      }
      if (cat == "type") {
        // MV版本
        this.chosenType = value;
        this.typeActive = value;
      }
      if (cat == "alphabet") {
        this.character = value;
        this.alphabetActive = value;
      }

      this.artists = [];
      this.currentPage = 1;
      this.showSingersCategory();
    },
    // showSingersCategory() {
    //   this.loadingSingers = true;
    //   getSingersCategory(
    //     this.limit,
    //     this.offset,
    //     this.chosenArea,
    //     this.chosenType,
    //     this.character
    //   ).then((res) => {
    //     this.artists = this.artists.concat(res.artists);
    //     this.loadingSingers = false;

    //     if (res.more) {
    //       this.currentPage += 1;
    //       this.loading = true;
    //     } else {
    //       this.loading = false;
    //     }
    //   });
    // },
    // "加载更多"  处理函数 延迟3秒加载更多数据
    handleLoadMore() {
      setTimeout(() => {
        // this.showSingersCategory();
        // 滑动，继续加载更多歌手
        //  currentPage +1
        this.loadingSingers = true;
        this.loading = true;
        this.currentPage = this.currentPage + 1;
        this.$store.dispatch("getArtistList", {
          limit: this.limit,
          offset: this.offset,
          area: this.area[0].value,
          type: this.type[0].value,
          initial: -1,
        });
        this.loading = false;
        this.loadingSingers = false;
      }, 3000);
    },
    getEnLang() {
      for (let i = 0; i < 26; i++) {
        this.alphabet.push({
          value: String.fromCharCode(97 + i),
          label: String.fromCharCode(65 + i),
        });
      }
      //添加热门和其他
      this.alphabet.unshift({
        value: 0,
        label: "热门",
      });
      this.alphabet.push({
        value: -1,
        label: "其他",
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
.singer-wrap {
  // height: 100vh;
  margin-top: -20px;

  li {
    &:hover {
      color: $color-theme;
      transition: all 0.4s;
    }
  }

  .tag-en {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    li {
      width: 28px;
      height: 28px;
      margin-right: 14px;
      text-align: center;
      line-height: 29px;
      border-radius: 50%;
      font-size: 13px;
      color: #333333;
      cursor: pointer;

      &:first-child, &.last-child {
        width: 56px;
        border-radius: 14px;
      }

      &.active {
        background: $color-theme;
        font-weight: 700;
        color: #ffffff;
      }

      &:hover {
        color: $color-theme;
        transition: all 0.4s;
      }
    }
  }

  .tag-lang {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;

    li {
      width: 56px;
      height: 28px;
      line-height: 29px;
      font-size: 13px;
      text-align: center;
      border-radius: 14px;
      cursor: pointer;
      margin-right: 6px;

      &.active {
        background: $color-theme;
        font-weight: 700;
        color: #ffffff;
      }
    }
  }

  .tag-type {
    li {
      width: auto;
      padding: 0 15px;
    }
  }

  .singer-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin: 30px -15px 0;
  }
}

li {
  padding: 0 15px 30px;
  flex: 0 0 10%;
  max-width: 10%;

  .cover {
    position: relative;
    z-index: 2;
    padding-top: 100%;
    border-radius: 50%;
    background-color: #d9d9d9;

    .image {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      border-radius: 50%;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05) inset, -1px -1px 0 rgba(0, 0, 0, 0.05) inset;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05), inset -1px -1px 0 rgba(0, 0, 0, 0.05);
      }
    }
  }

  .info {
    margin-top: 15px;
    text-align: center;

    .name {
      font-weight: 700;
      font-size: 14px;
      line-height: 18px;
      word-break: break-word;
    }

    .count {
      font-size: 12px;
      margin-top: 10px;
      color: $color-theme;
    }
  }
}
</style>